<!--调整弹窗组件-->
<template>
  <div v-loading.fullscreen.lock="loading" element-loading-text="正在下发中...">
    <el-dialog
      title="调整"
      v-model="dialogVisible"
      width="30%"
      center
      align-center
      class="assessmentsAreIssued"
      @close="closeDialog"
      @open="openDialog"
      :close-on-click-modal="false"
    >
      <el-form :model="formData" label-width="auto" :rules="rules" ref="adjustTheForm">
        <el-form-item label="下发名称：" prop="name" placeholder="请输入下发名称">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="添加人员：">
          <div class="listOfPeople-input" @click="selector(formData.selectUserData)">
            <span v-if="formData.selectUserData.length === 0">请选择人员</span>
            <el-tag
              v-else
              v-for="(item, index) in formData.selectUserData"
              :key="index"
              closable
              class="input-item"
              type="info"
              @close="handleClose(item)"
            >
              {{ item.userName }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item label="答复时间：" prop="issuanceTime">
          <el-date-picker
            v-model="formData.issuanceTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="default"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="timeSelection"
          />
        </el-form-item>
        <el-form-item label="通知标题：" prop="noticeTitle">
          <el-input v-model="formData.noticeTitle" placeholder="请输入通知标题" />
        </el-form-item>
        <el-form-item label="通知内容：" prop="noticeContent">
          <el-input v-model="formData.noticeContent" :rows="3" type="textarea" placeholder="请输入通知内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="danger" @click="adjustTheDistribution">调整</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <!--人员选择弹窗-->
  <PersonnelSelection ref="personnelSelectionDialog" @submit="submit"></PersonnelSelection>
</template>

<script setup>
import PersonnelSelection from "@/components/flowDemo/PersonnelSelectionDialog.vue";
import { omit } from "lodash";
import { ElMessage } from "element-plus";
import { evaluationAdjust, getEvaluationInfo } from "@/api/partyBuilding";
// 调整弹窗状态
const dialogVisible = defineModel("dialogVisible", {
  type: Boolean,
  required: true,
  default: false,
});
const props = defineProps({
  // 模板id
  id: {
    type: String,
    default: "",
  },
});
// 选择模板
const rules = reactive({
  name: [{ required: true, message: "请输入下发标题", trigger: "blur" }],
  selectUserData: [{ type: "array", required: true, message: "请选择人员", trigger: "blur" }],
  issuanceTime: [{ type: "array", required: true, message: "请选择下发时间", trigger: "blur" }],
  noticeTitle: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
  noticeContent: [{ required: true, message: "请输入通知内容", trigger: "blur" }],
}); //下发管理表单校验
const formData = reactive({
  name: "",
  id: "", //模板id
  issuanceTime: [], //下发时间范围
  startTime: "", //测评开始时间
  endTime: "", //测评结束时间
  selectUserData: [], //额外下发人员
  noticeTitle: "", //通知标题
  noticeContent: "", //通知内容
}); //新增群组表单数据
/**
 * 打开弹窗根据当前的下发id的数据填充到弹窗
 */
const openDialog = async () => {
  const { data } = await getEvaluationInfo(props);
  const { startTime, endTime, ...remainingData } = data;
  const newFormData = {
    ...remainingData,
    selectUserData: [],
    issuanceTime: [startTime, endTime],
  };
  Object.assign(formData, newFormData);
};
const personnelSelectionDialog = ref(); //人员选择弹窗
const adjustTheForm = ref(null); //调整弹窗表单页面
/**
 * 人员选择弹窗提交
 * @param value 人员数据
 */
const submit = value => (formData.selectUserData = value);
/**
 * 关闭弹窗重置数据
 */
const closeDialog = () => adjustTheForm.value.resetFields();
/**
 * 打开人员选择弹窗
 * @param value 人员待选数据
 */
const selector = value => personnelSelectionDialog.value.showDialog(value);
/**
 * 人员删除
 * @param value 删除的元素
 */
const handleClose = value => (formData.selectUserData = formData.selectUserData.filter(item => item.userId !== value.userId));
/**
 * 调整弹窗时间选择
 */
const timeSelection = value => {
  const [startTime, endTime] = value;
  Object.assign(formData, { startTime, endTime });
};
const loading = ref(false); //提交loading
const emit = defineEmits(["search"]);
/**
 * 调整按钮
 */
const adjustTheDistribution = async () => {
  const calibration = await adjustTheForm.value.validate();
  if (!calibration) {
    return;
  }
  const data = omit(formData, "issuanceTime"); //接口不需要时间范围参数
  const newFormData = {
    ...data,
    selectUserData: JSON.stringify(data.selectUserData),
  };
  loading.value = true;
  await evaluationAdjust(newFormData); //编辑下发
  ElMessage.success("修改成功");
  loading.value = false;
  dialogVisible.value = false;
  emit("search");
};
</script>
<style lang="less">
@import "@/assets/styles/index.less";
</style>
<style scoped lang="less">
.assessmentsAreIssued {
  .el-dialog__body {
    .el-select.el-select--default {
      width: 100%;
    }
    .listOfPeople-input {
      border: 1px solid #dcdfe6;
      min-height: 60px;
      cursor: pointer;
      color: #c3c3c3;
      width: 100%;
      padding: 0 11px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 10px;
      box-sizing: border-box;
    }
  }
}
</style>
